<template>
  <div class="i-layout-inside-fix-with-sider">
    <div class="i-layout-page-header">
      <h1>{{title}}</h1>
    </div>
    <Card style="margin-bottom: 1rem;">
      <div class="i-layout-page-header-title">
        <h3>单据信息</h3>
      </div>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
        <Row>
          <Col span="11">
          <FormItem label="车牌号" prop="PlateNum">
            <Input v-model="formValidate.PlateNum" placeholder="请输入车牌号"></Input>
          </FormItem>
          </Col>
          <Col span="11">
          <FormItem label="日期" prop="DateRM">
            <DatePicker type="date" placeholder="请输入日期" v-model="formValidate.DateRM"></DatePicker>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="11">
          <FormItem label="业务类型" prop="RoM">
            <Select v-model="formValidate.RoM" placeholder="请输入业务类型">
              <Option value="1">保养</Option>
              <Option value="2">维修</Option>
              <Option value="3">装潢</Option>
              <Option value="4">轮胎</Option>
              <Option value="5">电瓶</Option>
              <Option value="6">工具</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="11">
          <FormItem label="维修厂" prop="GarName">
            <Input v-model="formValidate.GarName" placeholder="请输入维修厂"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="11">
          <FormItem label="总金额" prop="Cost">
            <Input v-model="formValidate.Cost" placeholder="请输入总金额"></Input>
          </FormItem>
          </Col>
          <Col span="11">
          <FormItem label="经办人" prop="Operator">
            <Input v-model="formValidate.Operator" placeholder="请输入经办人"></Input>
          </FormItem>
          </Col>
        </Row>
        <FormItem label="备注" prop="Remark">
          <Input v-model="formValidate.Remark" placeholder="请输入备注"></Input>
        </FormItem>
      </Form>
    </Card>
    <Card>
      <div class="i-layout-page-header-title">
        <h3>项目</h3>
      </div>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
        <Row>
          <Col span="11">
          <FormItem label="项目名称" prop="NameRM">
            <Input v-model="formValidate.PlateNum" placeholder="请输入项目名称"></Input>
          </FormItem>
          </Col>
          <Col span="11">
          <FormItem label="数量" prop="SumRM">
            <Input v-model="formValidate.SumRM" placeholder="请输入数量"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="11">
          <FormItem label="单价" prop="PriceRM">
            <Input v-model="formValidate.PriceRM" placeholder="请输入单价"></Input>
          </FormItem>
          </Col>
          <Col span="11">
          <FormItem label="金额" prop="CostRM">
            <Input v-model="formValidate.GarName" placeholder="请输入金额"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="11">
          <FormItem label="工时" prop="HourRM">
            <Input v-model="formValidate.HourRM" placeholder="请输入工时"></Input>
          </FormItem>
          </Col>
          <Col span="11">
          <FormItem label="工时费" prop="numeric">
            <Input v-model="formValidate.numeric" placeholder="请输入工时费"></Input>
          </FormItem>
          </Col>
        </Row>
        <FormItem label="进场里程" prop="MileRM">
          <Input v-model="formValidate.MileRM" placeholder="请输入进场里程"></Input>
        </FormItem>
      </Form>

    </Card>
    <div style="margin-left: 35px;">
      <Button type="primary" label="large" long style="float:right;margin: 15px;">提交</Button>
    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        title: "维修保养录入",
        formValidate: {
          PlateNum: '',
          DateRM: '',
          RoM: '',
          GarName: '',
          interest: [],
          CostRM: '',
          Operator: '',
          Remark: '',
          NameRM: '',
          SumRM: '',
          PriceRM: '',
          Cost: '',
          HourRM: '',
          PriceHour: '',
          MileRM: ''
        },
        ruleValidate: {
          PlateNum: [{
            required: true,
            message: 'The PlateNum cannot be empty',
            trigger: 'blur'
          }],
          RoM: [{
            required: true,
            message: 'Please select the RoM',
            trigger: 'change'
          }],
          GarName: [{
            required: true,
            message: 'The GarName cannot be empty',
            trigger: 'blur'
          }],
          Cost: [{
            required: true,
            message: 'The Cost cannot be empty',
            trigger: 'blur'
          }],
          Operator: [{
            required: true,
            type: 'string',
            message: 'Please Operator',
            trigger: 'blur'
          }]


        },
      }
    }
  }
</script>

<style>
  .i-layout-page-header {
    background-color: #FFF;
    padding: 1.25rem;
    margin-bottom: 1rem;

  }

  .i-layout-page-header-title {
    background-color: #FFF;
    padding: 0.25rem;
    margin-left: 1.25rem;
    margin-bottom: 1rem;
  }

  .iuv-foot-toolbar {

    right: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 56px;
    background: #fff;
  }
</style>
